page-quotation {
  .fixed-view {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .button-md {
    margin-top: 0;
    margin-bottom: 0;
  }

  .button-ios {
    margin-top: 0;
    margin-bottom: 0;
  }

  .tab-btn-select {
    color: white;
    background-color: $gm-primary;
    font-size: 3.6vw;
    text-align: center;
    border-bottom: solid white 4px;
  }

  .tab-btn-none {
    color: white;
    background-color: $gm-primary;
    font-size: 3.6vw;
    text-align: center;
    border-bottom: solid $gm-primary 1px;
  }

  .sort-layout {
    color: white;
    font-size: 3.2vw;
    padding: 4px;
    background-color: #2d3945;

    .to-right {
      text-align: right;
    }
  }

  .bg-color {
    background-color: #1A2128;
  }

  .quo-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid $gray-normal 1px;
    padding: 4px 0;

    .title-master {
      color: white;
      font-weight: 500;
      font-size: 4vw;
    }

    .title-slave {
      color: $gray-normal;
      font-size: 3vw;
      margin-top: 4px;
    }

    .price {
      color: white;
      font-size: 4vw;
      font-weight: 500;
      text-align: right;
      margin: 0 2vw;
    }

    .range {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }

  @keyframes normal-animation {
    from {background: $gray-normal;}
    to {background: transparent;}
  }

  @-webkit-keyframes normal-animation {
    from {background: $gray-normal;}
    to {background: transparent;}
  }

  @keyframes up-animation {
    from {background: red;}
    to {background: transparent;}
  }

  @-webkit-keyframes up-animation {
    from {background: red;}
    to {background: transparent;}
  }

  @keyframes down-animation {
    from {background: green;}
    to {background: transparent;}
  }

  @-webkit-keyframes down-animation {
    from {background: green;}
    to {background: transparent;}
  }

  .common-price {
    width: 24vw;
    border-radius: 1vw;
  }

  .normal-price-update {
    @extend .common-price;
    animation: normal-animation 1s;
    -webkit-animation: normal-animation 1s;
  }

  .up-price-update {
    @extend .common-price;
    animation: up-animation 1s;
    -webkit-animation: up-animation 1s;
  }

  .down-price-update {
    @extend .common-price;
    animation: down-animation 1s;
    -webkit-animation: down-animation 1s;
  }

  .common-range {
    color: white;
    font-weight: 500;
    font-size: 4vw;
    padding: 4px 0;
    text-align: center;
    width: 32vw;
    border-radius: 1vw;
  }

  .normal-range {
    @extend .common-range;
    background-color: $gray-normal;
  }

  .up-range {
    @extend .common-range;
    background-color: red;
  }

  .down-range {
    @extend .common-range;
    background-color: green;
  }
}
